<template>
    <div id="portname-control" class="portname-control-wrap">
        <button @click="changeshow">航点名称</button>
    </div>
</template>

<script>
    //import * as vx from 'vuex'
    export default{
        data(){
            return {
                showname: false,
            }
        },
        methods: {
            changeshow(){
                let option = window.vuemapDom.getOption();
                if(this.showname){
                    option.series[0].label.normal = {
                        positon: 'end',
                        show: false,
                        formatter: function (p){
                            return p.data.toName;
                        },
                        textStyle: {
                            color: '#FFF'
                        }
                    };
                } else {
                    option.series[0].label.normal = {
                        positon: 'end',
                        show: true,
                        formatter: function (p){
                            return p.data.toName;
                        },
                        textStyle: {
                            color: '#FFF'
                        }
                    };
                }
                window.vuemapDom.setOption(option);
                this.showname = !this.showname;
            },
        },
        mounted: function () {
        }
    }
</script>

<style scoped>
    .portname-control-wrap{
        position: fixed;
        width: 50px;
        height: 50px;
        top: 62%;
        right: 80px;
        background-color: #1c8de0;
        font-size: 14px;
        color: #fff;
    }
</style>
